<template>
  <div class="repair-detail-page">
    <el-card>
      <div style="font-weight: bold; font-size: 18px; margin-bottom: 16px;">报修单详情</div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
        <el-descriptions-item label="标题">{{ detail.title }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ typeMap[detail.typeId] || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusTagType(detail.status)">{{ statusLabel(detail.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请人">{{ detail.applicantName }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ detail.contact }}</el-descriptions-item>
        <el-descriptions-item label="报修地点">{{ detail.location }}</el-descriptions-item>
        <el-descriptions-item label="维修人员">{{ detail.assigneeName }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ detail.applyTime }}</el-descriptions-item>
        <el-descriptions-item label="派单时间">{{ detail.assignTime }}</el-descriptions-item>
        <el-descriptions-item label="完工时间">{{ detail.finishTime }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ detail.remark }}</el-descriptions-item>
      </el-descriptions>
      <div style="margin: 24px 0 8px 0; font-weight: bold;">报修内容</div>
      <el-input v-model="detail.content" type="textarea" :rows="4" readonly />
      <div style="margin: 24px 0 8px 0; font-weight: bold;">附件</div>
      <el-upload
        v-if="canEdit"
        :action="uploadUrl"
        :data="{ requestId: detail.id }"
        :on-success="onUploadSuccess"
        :show-file-list="false"
        :headers="uploadHeaders"
        multiple
        drag
      >
        <el-icon><UploadFilled /></el-icon>
        <div>点击或拖拽上传附件</div>
      </el-upload>
      <el-row :gutter="16" style="margin-top: 8px;">
        <el-col v-for="item in attachments" :key="item.id" :span="4">
          <el-card :body-style="{ padding: '8px' }" style="margin-bottom: 8px;">
            <div style="word-break: break-all;">{{ item.fileName }}</div>
            <a :href="item.fileUrl" target="_blank">预览/下载</a>
            <el-button v-if="canEdit" type="danger" size="mini" @click="onDeleteAttachment(item)" style="margin-top: 4px;">删除</el-button>
          </el-card>
        </el-col>
      </el-row>
      <div style="margin: 24px 0 8px 0; font-weight: bold;">流程操作</div>
      <div>
        <el-button v-if="detail.status === 0" type="success" @click="onAudit(true)">审核通过</el-button>
        <el-button v-if="detail.status === 0" type="danger" @click="onAudit(false)">驳回</el-button>
        <el-button v-if="detail.status === 1" type="primary" @click="assignDialog.visible = true">派单</el-button>
        <el-button v-if="detail.status === 2" type="warning" @click="onFinish">完工</el-button>
      </div>
    </el-card>
    <!-- 派单弹窗 -->
    <el-dialog v-model="assignDialog.visible" title="派单" width="400px">
      <el-form :model="assignDialog.form" label-width="80px">
        <el-form-item label="维修人员">
          <el-input v-model="assignDialog.form.assigneeName" placeholder="请输入维修人员姓名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="assignDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="doAssign">确定</el-button>
      </template>
    </el-dialog>
    <!-- 驳回弹窗 -->
    <el-dialog v-model="rejectDialog.visible" title="驳回理由" width="400px">
      <el-input v-model="rejectDialog.remark" type="textarea" rows="4" placeholder="请输入驳回理由" />
      <template #footer>
        <el-button @click="rejectDialog.visible = false">取消</el-button>
        <el-button type="danger" @click="doReject">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const id = route.query.id
const detail = ref({})
const typeMap = reactive({})
const statusOptions = [
  { value: 0, label: '待审核' },
  { value: 1, label: '待派单' },
  { value: 2, label: '维修中' },
  { value: 3, label: '已完成' },
  { value: 4, label: '已驳回' }
]
const statusLabel = (status) => {
  const found = statusOptions.find(item => item.value === status)
  return found ? found.label : '-'
}
const statusTagType = (status) => {
  switch (status) {
    case 0: return 'info'
    case 1: return 'primary'
    case 2: return 'warning'
    case 3: return 'success'
    case 4: return 'danger'
    default: return ''
  }
}
const canEdit = ref(true)
const fetchDetail = async () => {
  const res = await request.get(`/repair/request/${id}`)
  if (res.code === 1) {
    detail.value = res.data
  }
}
const fetchTypeList = async () => {
  const res = await request.get('/repair/type/list')
  if (res.code === 1) {
    res.data.forEach(item => { typeMap[item.id] = item.name })
  }
}
// 附件管理
const attachments = ref([])
const fetchAttachments = async () => {
  const res = await request.get('/repair/attachment/list', { params: { requestId: id } })
  if (res.code === 1) {
    attachments.value = res.data
  }
}
const uploadUrl = '/api/repair/attachment' // 需代理/api到后端
const uploadHeaders = {} // 如需token可补充
const onUploadSuccess = () => {
  ElMessage.success('上传成功')
  fetchAttachments()
}
const onDeleteAttachment = async (item) => {
  await request.delete(`/repair/attachment/${item.id}`)
  ElMessage.success('删除成功')
  fetchAttachments()
}
// 流程操作
const onAudit = (pass) => {
  if (pass) {
    ElMessageBox.confirm('确认通过该报修单？', '提示', { type: 'warning' }).then(async () => {
      await request.post('/repair/request/audit', null, { params: { id, pass: true } })
      ElMessage.success('审核通过')
      fetchDetail()
    })
  } else {
    rejectDialog.visible = true
    rejectDialog.remark = ''
  }
}
const rejectDialog = reactive({ visible: false, remark: '' })
const doReject = async () => {
  await request.post('/repair/request/audit', null, { params: { id, pass: false, remark: rejectDialog.remark } })
  ElMessage.success('已驳回')
  rejectDialog.visible = false
  fetchDetail()
}
const assignDialog = reactive({ visible: false, form: { assigneeName: '' } })
const doAssign = async () => {
  if (!assignDialog.form.assigneeName) {
    ElMessage.warning('请输入维修人员姓名')
    return
  }
  await request.post('/repair/request/assign', null, { params: { id, assigneeId: 0, assigneeName: assignDialog.form.assigneeName } })
  ElMessage.success('派单成功')
  assignDialog.visible = false
  fetchDetail()
}
const onFinish = () => {
  ElMessageBox.confirm('确认将该报修单标记为已完成？', '提示', { type: 'warning' }).then(async () => {
    await request.post('/repair/request/finish', null, { params: { id } })
    ElMessage.success('已完工')
    fetchDetail()
  })
}
onMounted(() => {
  fetchTypeList()
  fetchDetail()
  fetchAttachments()
})
</script>

<style scoped>
.repair-detail-page {
  padding: 24px;
}
</style> 